var click_p = document.querySelector("p"),
	ul = document.querySelector("ul"),
	li_list = document.querySelectorAll(".list"),
	page = document.querySelector(".page"),
	record = document.querySelector(".record");
//data_name = li.getAttribute("data-name");

var num = 0, // 转到哪个位置
	around = 0, // 转圈初始值
	total_around = 10, // 转圈总圈数
	speed = 500, // 转圈速度/时间
	index, // 指定转到哪个位置
	isTrue = true, // 开关判断
	timer, // 定时器
	frequency = 3;

//var obj_arr_index = [0, 1, 2, 3, 4, 5, 6, 7];
//var obj_arr_text = ["一等奖", "安慰奖", "二等奖", "安慰奖", "三等奖", "安慰奖", "四等奖", "安慰奖"];
//obj_arr_text.forEach(function(val, index) {
//	li_list[index].innerText += `${val}`;
//})

function start() {
	// 去掉active
	for(let j = 0; j < li_list.length; j++) {
		li_list[j].classList.remove("active");
	}
	// 计算转圈次数
	num++;
	if(num >= li_list.length) {
		num = 0;
		around++;
	}
	// 添加变色类名 active
	li_list[num].classList.add("active");
	// 时间衰减
	speed -= 50;
	// 满足转圈数和指定位置就停止
	if(around >= total_around && num == index) {
		clearTimeout(timer); // 清除定时器
		isTrue = true;
		speed = 500; // 速度重新变为500
		// 抽中后弹窗
		//		page.innerText = "恭喜你中了精美礼品一份！还有"+frequency+"次机会哦";
		page.innerText = "恭喜你中了"+li_list[num].getAttribute("data-name")+",还有"+frequency+"次机会";
		page.style.display = "block";
		record.innerHTML += `
		 <span>${li_list[num].getAttribute("data-name")}</span>
		`;
		/*
		 * 第二次点击的时候跳过抽过的奖品
		 */
		li_list[num].classList.add("biaoji"); // 给选中的奖品加个类名biaoji
		li_list = document.querySelectorAll(".list:not(.biaoji)"); // 重新获取除了biaoji类名的其它元素
		num--;

	} else {
		page.style.display = "none";
		// 不满足条件时调用定时器
		timer = setTimeout(start, speed);
		// 最后一圈减速
		if(around >= total_around - 1 || speed <= 50) {
			speed += 120;
		}
	}
}
// 点击抽奖
click_p.addEventListener("click", function() {
	frequency--;
	if(frequency <= 3 && frequency >= 0) {
		if(isTrue) {
			around = 0; // 重新把转圈初始值设为0
			index = Math.floor(Math.random() * li_list.length); // 随机位置
			console.log(index)
			start();
			isTrue = false;
		}
	} else {
		alert("抽奖次数已满三次，请充值后再继续抽哦！");
	}

})